<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ arr.length }}</strong></span>
    <ul class="filters">
      <li>
        <a @click="btnFn('all')" :class="{selected:isSel==='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="btnFn('no')" :class="{selected:isSel==='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="btnFn('yes')" :class="{selected:isSel==='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button @click="delCompleted" class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
// 目标：统计当前任务显示的数量
// 1、父传子，将数组传递给子组件
// 2、获取数组的长度显示在对应的标签上即可
// 目标2:实现底部导航切换
// 需求1、点击底部切换，点谁谁有边框
// 1-1、给按钮设置不同的类型all, yes,no分别表示全部，已完成、未完成
// 1-2、给按钮添加点击事件，在事件处理函数中通过一个变量issel将按钮类型保存起来
// 1-3、动态设置按钮类名,当保存的类型和当前按钮的类型相同的时候说明用户点击了该按钮
//  需求2:对应切换不同的数据
// 2-1、子传父，通知父组件需要筛选显示的数据(传递了按钮类型给父组件)
// 2-2、在父组件中,接收按钮类型，并通过一个变量curType保存起来
// 2-3、通过计算属性来筛选数据，然后把计算属性使用到对应的位置
    //综合按钮类型和filter方法进行判断以及实现
export default {
  //父传子语法，通过props接收
props:['arr'],
data(){
  return{
    isSel:"all",
  }
},
methods:{
  // 清除所有按钮
  delCompleted(){
    //子传父，向父级传达需要进行清除未完成的操作，代码主体放在父级内部
 this.$emit('delCom')
  },
  btnFn(type){
    //保存当前点击按钮的类型
    this.isSel=type;
    //子传父，通知父组件筛选需要显示的数据
    this.$emit('curShow',this.isSel)
  }
}
}
</script>